import React from 'react'

import {Route,Routes,Link,NavLink,Navigate,useNavigate} from 'react-router-dom'

import './App.scss'

import Home from './views/Home'
import Login from './views/Login'

function App(){
    const navigate = useNavigate();
    console.log('navigate',navigate)

    return (
        <div>
            App
            {/* 当浏览器地址为/home时，渲染特定的内容 */}
            
                <Routes>
                    <Route path="/home" element={<Home/>} />
                    <Route path="/login" element={<Login/>} />
                    
                    {/* 重定向：/->/home */}
                    <Route path="/" element={<Navigate to="/home" />}/>
                </Routes>
                

                <NavLink to='/home' className={({isActive})=>isActive?'current':null}>首页</NavLink>
                <NavLink to='/login' replace>登录</NavLink>
                <nav>
                    <button onClick={()=>{
                        // 跳转并添加页面记录
                        navigate('/home')

                        // 跳转并替换当前记录
                        navigate('/home',{replace:true})
                    }}>首页</button>

                </nav>
        </div>
    )
}


export default App;